<template>
  <div class="app-container">
    <div class="flex-box">
      <div class="item">
        <el-button @click="dialogFormVisible=true">添加管理员</el-button>
      </div>
      <div class="item">
        <el-date-picker
          v-model="searchdate"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="—"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          @change="getList"
        />
      </div>
      <div class="item">
        <el-input v-model="searchcontent" placeholder="请输入权限名称">
          <el-button slot="append" icon="el-icon-search" @click="getList">搜索</el-button>
        </el-input>
      </div>
      <div class="item">
        <span>总共有{{ total }}条数据</span>
      </div>
    </div>
    <!-- <el-row>
      <el-col :span="9">
        <el-date-picker
          v-model="searchdate"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          @change="getList"
        />
      </el-col>
      <el-col :span="8">
        <el-input v-model="searchcontent" placeholder="请输入权限名称">
          <el-button slot="append" icon="el-icon-search" @click="getList">搜索</el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-row style="margin:14px 0">
      <el-col :span="24">
        <el-button type="primary" plain @click="dialogFormVisible=true">添加管理员</el-button>
        <span style="margin-left:20px;font-size:12px;font-weight:bold">总共有{{ total }}条数据</span>
      </el-col>
    </el-row> -->
    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%" class="no-r-b"
      :header-cell-style="{background:'#FAFAFA',color:'#666666'}">
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="管理员账号" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="管理员角色" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.roleid>-1?(scope.row.roleid?scope.row.rolename:'超级管理员'):'无权限' }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="状态" width="100">
        <template slot-scope="{row}">
          <el-tag :type="row.deleted_at | statusFilter">
            {{ row.deleted_at?'已禁用':'正常' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" icon="el-icon-edit" @click="editShow(scope.row)">编辑</el-button>
          <el-button type="default" size="small" icon="el-icon-setting" @click="resetPass(scope.row)">重置密码</el-button>
          <el-button v-if="scope.row.deleted_at" type="success" size="small" icon="el-icon-thumb" @click="changeStatus(scope.row.id,1)">启用</el-button>
          <el-button v-else type="danger" size="small" icon="el-icon-delete" @click="forbiden(scope.row)">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <!--列表数据添加/编辑开始  -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="95%" center class="user">
      <el-form ref="ruleForm" :model="formRow" label-width="70px">
        <el-form-item label="账号">
          <el-input v-model="formRow.username" :disabled="formRow.type=='reset'" auto-complete="off" />
        </el-form-item>
        <el-form-item v-if="!formRow.id||formRow.type=='reset'" label="密码">
          <el-input v-model="formRow.password" show-password auto-complete="off" />
        </el-form-item>
        <el-form-item v-if="!formRow.id||formRow.type=='reset'" label="确认密码">
          <el-input v-model="formRow.password_confirmation" show-password auto-complete="off" />
        </el-form-item>
        <el-form-item v-if="formRow.type!='reset'" label="所属角色">
          <el-select v-model="formRow.roleid" placeholder="请选择所属角色">
            <el-option
              v-for="item in modules"
              :key="item.id"
              :label="item.rolename"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item> -->
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <!-- </el-form-item> -->
      </el-form>
    </el-dialog>
    <!--列表数据添加/编辑结束  -->
  </div>
</template>

<script>
import { getAdmins, getRoles, addAdmin, editAdmin, resetAdmin, statusAdmin } from '@/api/role'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { Message } from 'element-ui'

export default {
  name: 'PowList',
  components: { Pagination },
  filters: {
    statusFilter(status) {
      if (status) {
        status = 'deleted'
      } else {
        status = 'published'
      }
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [],
      modules: [], // 弹窗下拉框数据
      total: 0,
      listLoading: true,
      searchcontent: '', // 搜索内容
      listQuery: {
        page: 1,
        limit: 20
      },
      powerTypes: [
        '查看', '添加', '编辑', '审核', '删除', '导出', '导入'
      ], // 权限类型
      searchdate: '', // 搜索日期
      // 日期插件参数
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      // 弹窗标题
      dialogTitle: '管理员添加',
      dialogFormVisible: false,
      formRow: {
        username: '',
        roleid: 1,
        password: '',
        password_confirmation: ''
      }// 表单数据
    }
  },
  created() {
    this.getList()
    this.get_roles()
  },
  methods: {
    // 获取列表数据
    getList() {
      this.listLoading = true
      const search = { searchcontent: this.searchcontent }
      if (this.searchdate) {
        const startDate = this.searchdate[0]
        const endDate = this.searchdate[1]
        search.startDate = startDate
        search.endDate = endDate
      }
      const postdata = { ...this.listQuery, ...search }
      getAdmins(postdata).then(response => {
        const { data } = response
        console.log(data, 'getList')
        this.list = data.list
        this.total = data.total
        this.listLoading = false
      })
    },
    // 获取所有模块
    get_roles() {
      getRoles({ page: 1, limit: 100 }).then(response => {
        const { data } = response
        this.modules = data.list
      })
    },
    // 表单提交方法
    submitForm(formName) {
      if (this.formRow.id) { // 编辑管理员
        editAdmin(this.formRow).then(res => {
          Message({
            message: '保存成功',
            type: 'success',
            duration: 2 * 1000
          })
          this.getList()
          this.dialogFormVisible = false
        })
      } else {
        if (this.formRow.type === 'reset') { // 重置密码
          resetAdmin(this.formRow).then(res => {
            Message({
              message: '保存成功',
              type: 'success',
              duration: 2 * 1000
            })
            this.getList()
            this.dialogFormVisible = false
          })
        } else {
          addAdmin(this.formRow).then(res => { // 添加管理员
            Message({
              message: '保存成功',
              type: 'success',
              duration: 2 * 1000
            })
            this.getList()
            this.dialogFormVisible = false
          })
        }
      }
    },
    // 重置密码
    resetPass(row) {
      this.formRow = row
      this.formRow.type = 'reset'
      this.formRow.password = ''
      this.dialogTitle = '重置密码'
      this.dialogFormVisible = true
    },
    // 编辑
    editShow(row) {
      this.formRow = row
      this.dialogTitle = '管理员编辑'
      this.dialogFormVisible = true
    },

    // 禁用
    forbiden(row) {
      this.$confirm('确认禁用' + row.username + '吗?', '禁用确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.changeStatus(row.id, 0)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消禁用'
        })
      })
    },
    // 改变用户状态
    changeStatus(id, status) {
      statusAdmin({ id, status }).then(() => {
        const type = status ? 'success' : 'success'
        const message = status ? '启动成功' : '禁用成功'
        this.$message({ type, message })
        this.getList()
      })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
